// 1. 导入vuex包
import Vuex from 'vuex'
import Vue from 'vue'
import { getMenus } from '@/api'

import router from '@/router'

// 2. 使用Vue.use()安装vuex这个插件
Vue.use(Vuex)

// 3. 创建一个store实例
const store = new Vuex.Store({
  state:{
    // 用于存放权限菜单列表
    menus:JSON.parse(localStorage.getItem('menus')) || [], 
    // 用于存放组装好的路由规则
    routes:JSON.parse(localStorage.getItem('routes'))||[]
  },
  mutations:{
    initroutes(state,routes){
      state.routes = routes
    },
    initmenus(state,list){
      state.menus = list

      // 数据保持成功后再跳转页面
      router.push('/home')
      // this.$router === new VueRouter 的router实例
      // this.$route === 当前组件对应的路由规则对象
    }
  },
  actions:{
    /**
     * 
     * @param {*context表示的就是store实例} context 
     * @param {*调用该方法时传入的真实数据} arg 
     */
    fetchMenus(context,arg){
      // 执行异步操作
      getMenus().then(res=>{
        localStorage.setItem('menus',JSON.stringify(res))
        context.commit('initmenus',res)

        /* todo: 这个位置不能直接使用localStorage存储路由规则
        if(context.state.routes.length === 0){
          res.forEach(v=>{
            v.children.forEach(item=>{
              console.log(item.path)
              let route = {}
              route.path = '/' + item.path
              // 使用路由懒加载拼接路由路径获取组件
              route.component = () => import(`@/components/${v.path}/${item.path}.vue`)
              router.options.routes[2].children.push(route)
            })
          })
          localStorage.setItem('routes',JSON.stringify(router.options.routes))
          router.addRoutes(router.options.routes)
          context.commit('initroutes',router.options.routes)
        }else{
          console.log(context.state.routes,555)
          router.addRoutes(context.state.routes)
        }
        */
      })
    }
  }
})

// 4. 将store实例挂载到vue实例上

export default store

